<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>网络测速工具</title>
		<script src="https://cdn.tailwindcss.com"></script>
		<link href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<script>
			tailwind.config = {
				theme: {
					extend: {
						colors: {
							primary: '#165DFF',
							secondary: '#0FC6C2',
							success: '#00B42A',
							warning: '#FF7D00',
							danger: '#F53F3F',
							dark: '#1D2129',
							'dark-2': '#4E5969',
							'light-1': '#F2F3F5',
							'light-2': '#E5E6EB',
							'light-3': '#C9CDD4',
						},
						fontFamily: {
							inter: ['Inter', 'system-ui', 'sans-serif'],
						},
					},
				}
			}
		</script>
		<style type="text/tailwindcss">
			@layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-all-300 {
                transition: all 300ms ease-in-out;
            }
            .gradient-bg {
                background: linear-gradient(135deg, #165DFF 0%, #0FC6C2 100%);
            }
            .glass-effect {
                backdrop-filter: blur(10px);
                background-color: rgba(255, 255, 255, 0.7);
            }
            .card-shadow {
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
            }
            .btn-hover {
                transition: all 0.3s ease;
            }
            .btn-hover:hover {
                transform: translateY(-2px);
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            }
            .result-item {
                transition: all 0.5s ease;
            }
            .result-item:hover {
                transform: scale(1.03);
            }
            .speed-meter {
                transform-origin: center bottom;
                transition: transform 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            }
        }
    </style>
	</head>
	<body class="font-inter bg-gradient-to-br from-light-1 to-white min-h-screen">
		<!-- 顶部导航栏 -->
		<header class="sticky top-0 z-50 glass-effect border-b border-light-2">
			<div class="container mx-auto px-4 py-3 flex justify-between items-center">
				<div class="flex items-center space-x-2">
					<i class="fa fa-wifi text-primary text-2xl"></i>
					<h1 class="text-xl font-bold text-dark">网络测速工具</h1>
				</div>

				<div class="flex items-center space-x-4">
					<button class="hidden md:block px-4 py-2 rounded-full bg-primary text-white btn-hover">
						<i class="fa fa-user-circle mr-2"></i>登录
					</button>
					<button class="md:hidden text-dark-2 text-xl">
						<i class="fa fa-bars"></i>
					</button>
				</div>
			</div>
		</header>

		<!-- 主内容区 -->
		<main class="container mx-auto px-4 py-8">
			<!-- 测速卡片 -->
			<section class="max-w-4xl mx-auto mb-12">
				<div class="bg-white rounded-2xl card-shadow overflow-hidden">
					<!-- 卡片头部 -->
					<div class="gradient-bg p-6 text-white">
						<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-2 text-shadow">测试您的网络速度</h2>
						<p class="text-white/80 max-w-2xl">快速检测您的网络连接质量，包括下载速度、上传速度和延迟。</p>
					</div>

					<!-- 测速控制区 -->
					<div class="p-6 md:p-8">
						<div class="flex flex-col md:flex-row items-center justify-between mb-8">
							<div class="mb-4 md:mb-0">
								<p class="text-dark-2 mb-1">当前网络</p>
								<div class="flex items-center">
									<i class="fa fa-wifi text-primary text-xl mr-2"></i>
									<span class="font-medium text-dark" id="current-network">正在检测...</span>
								</div>
							</div>
							<div class="flex items-center space-x-4">
								<button id="settings-btn"
									class="p-2 rounded-full hover:bg-light-1 transition-all-300 text-dark-2">
									<i class="fa fa-cog"></i>
								</button>
							</div>
						</div>

						<!-- 测速结果 -->
						<div id="speed-results" class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
							<!-- 下载速度 -->
							<div class="result-item bg-light-1 rounded-xl p-5 text-center">
								<div class="text-dark-2 mb-2 text-sm">下载速度</div>
								<div class="flex items-end justify-center">
									<span id="download-speed"
										class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-primary">0</span>
									<span class="text-dark-2 mb-1 ml-1">Mbps</span>
								</div>
								<div class="mt-2 text-xs text-dark-2/70">
									<i class="fa fa-download mr-1"></i> 更高的下载速度意味着网页加载更快
								</div>
							</div>

							<!-- 上传速度 -->
							<div class="result-item bg-light-1 rounded-xl p-5 text-center">
								<div class="text-dark-2 mb-2 text-sm">上传速度</div>
								<div class="flex items-end justify-center">
									<span id="upload-speed"
										class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-secondary">0</span>
									<span class="text-dark-2 mb-1 ml-1">Mbps</span>
								</div>
								<div class="mt-2 text-xs text-dark-2/70">
									<i class="fa fa-upload mr-1"></i> 更高的上传速度意味着文件分享更快
								</div>
							</div>

							<!-- 延迟 -->
							<div class="result-item bg-light-1 rounded-xl p-5 text-center">
								<div class="text-dark-2 mb-2 text-sm">延迟</div>
								<div class="flex items-end justify-center">
									<span id="ping"
										class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-warning">0</span>
									<span class="text-dark-2 mb-1 ml-1">ms</span>
								</div>
								<div class="mt-2 text-xs text-dark-2/70">
									<i class="fa fa-bolt mr-1"></i> 更低的延迟意味着游戏和视频通话更流畅
								</div>
							</div>
						</div>

						<!-- 测速按钮 -->
						<div class="text-center">
							<button id="start-test"
								class="px-8 py-4 rounded-full bg-primary text-white text-lg font-medium btn-hover">
								<i class="fa fa-play-circle mr-2"></i>开始测试
							</button>
							<p id="test-status" class="mt-3 text-dark-2 text-sm hidden">
								<i class="fa fa-spinner fa-spin mr-2"></i>正在测试，请稍候...
							</p>
						</div>
					</div>
				</div>
			</section>

			<!-- 网络质量分析 -->
			<section class="max-w-4xl mx-auto mb-12">
				<div class="bg-white rounded-2xl card-shadow p-6 md:p-8">
					<h2 class="text-xl font-bold text-dark mb-6">网络质量分析</h2>
					<div id="quality-analysis" class="hidden">
						<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
							<div class="bg-light-1 rounded-xl p-5">
								<h3 class="font-medium text-dark mb-3">网络评级</h3>
								<div class="flex items-center mb-4">
									<div id="quality-rating" class="text-4xl font-bold text-success">优秀</div>
									<div class="ml-4">
										<div class="w-32 bg-light-3 rounded-full h-2.5">
											<div id="quality-progress" class="bg-success h-2.5 rounded-full"
												style="width: 80%"></div>
										</div>
										<div class="text-xs text-dark-2 mt-1">网络质量高于 80% 的用户</div>
									</div>
								</div>
								<p id="quality-description" class="text-sm text-dark-2">
									您的网络连接质量极佳，可以流畅观看高清视频、参与视频会议和在线游戏。</p>
							</div>

							<div class="bg-light-1 rounded-xl p-5">
								<h3 class="font-medium text-dark mb-3">建议</h3>
								<ul id="quality-suggestions" class="text-sm text-dark-2 space-y-2">
									<li><i class="fa fa-check-circle text-success mr-2"></i>您的网络表现出色，无需调整。</li>
								</ul>
							</div>
						</div>

						<!-- 详细分析 -->
						<div class="bg-light-1 rounded-xl p-5">
							<h3 class="font-medium text-dark mb-4">详细分析</h3>
							<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
								<div class="p-3">
									<div class="text-dark-2 text-sm mb-1">下载速度</div>
									<div class="flex items-center">
										<div class="text-success font-medium">优秀</div>
										<div class="ml-auto text-dark">92 Mbps</div>
									</div>
									<div class="w-full bg-light-3 rounded-full h-1.5 mt-2">
										<div class="bg-success h-1.5 rounded-full" style="width: 92%"></div>
									</div>
								</div>

								<div class="p-3">
									<div class="text-dark-2 text-sm mb-1">上传速度</div>
									<div class="flex items-center">
										<div class="text-success font-medium">优秀</div>
										<div class="ml-auto text-dark">42 Mbps</div>
									</div>
									<div class="w-full bg-light-3 rounded-full h-1.5 mt-2">
										<div class="bg-success h-1.5 rounded-full" style="width: 85%"></div>
									</div>
								</div>

								<div class="p-3">
									<div class="text-dark-2 text-sm mb-1">稳定性</div>
									<div class="flex items-center">
										<div class="text-success font-medium">优秀</div>
										<div class="ml-auto text-dark">98%</div>
									</div>
									<div class="w-full bg-light-3 rounded-full h-1.5 mt-2">
										<div class="bg-success h-1.5 rounded-full" style="width: 98%"></div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div id="analysis-placeholder" class="text-center py-12">
						<div class="w-24 h-24 mx-auto mb-4 bg-light-1 rounded-full flex items-center justify-center">
							<i class="fa fa-bar-chart text-3xl text-dark-2/50"></i>
						</div>
						<p class="text-dark-2/70">完成测速后，这里将显示您的网络质量分析</p>
					</div>
				</div>
			</section>

			<!-- 宽带估算 -->
			<section class="max-w-4xl mx-auto mb-12">
				<div class="bg-white rounded-2xl card-shadow p-6 md:p-8">
					<h2 class="text-xl font-bold text-dark mb-6">宽带评估</h2>
					<div id="broadband-estimation" class="hidden">
						<div class="bg-light-1 rounded-xl p-6 mb-6">
							<div class="flex items-start mb-4">
								<div class="bg-primary/10 rounded-full p-3 mr-4">
									<i class="fa fa-tachometer text-primary text-xl"></i>
								</div>
								<div>
									<h3 class="font-medium text-dark mb-2">您的网速评估</h3>
									<p id="bandwidth-estimation-text" class="text-lg text-dark">
										您的网速相当于 <span class="font-bold text-primary">10M～20M</span> 宽带
									</p>
									<p id="comparison-text" class="text-dark-2 mt-2">
										被全国 <span class="font-bold text-primary">82%</span> 的网络用户超越
									</p>
								</div>
							</div>
						</div>

						<h3 class="font-medium text-dark mb-4">网络建议</h3>
						<div id="usage-suggestions" class="space-y-3"></div>
					</div>

					<div id="estimation-placeholder" class="text-center py-12">
						<div class="w-24 h-24 mx-auto mb-4 bg-light-1 rounded-full flex items-center justify-center">
							<i class="fa fa-tachometer text-3xl text-dark-2/50"></i>
						</div>
						<p class="text-dark-2/70">完成测速后，这里将显示您的宽带评估结果</p>
					</div>
				</div>
			</section>
			<!-- 推荐网络服务 -->
			<section class="max-w-4xl mx-auto mb-12">
				<div class="bg-white rounded-2xl card-shadow p-6 md:p-8">
					<h2 class="text-xl font-bold text-dark mb-6">推荐网络服务</h2>
					<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
						<div class="bg-light-1 rounded-xl overflow-hidden flex flex-col md:flex-row">
							<div class="md:w-1/3 bg-primary/10 flex items-center justify-center p-4">
								<i class="fa fa-television text-4xl text-primary"></i>
							</div>
							<div class="md:w-2/3 p-5">
								<h3 class="font-medium text-dark mb-2">高速宽带套餐</h3>
								<p class="text-sm text-dark-2 mb-3">2000Mbps超高速光纤，支持全屋WiFi覆盖，适合多设备同时使用。</p>
								<div class="flex items-center justify-between">
									<div>
										<span class="text-primary font-bold text-xl">¥199</span>
										<span class="text-dark-2 text-sm">/月</span>
									</div>
									<button
										class="px-4 py-2 rounded-full bg-primary text-white text-sm btn-hover">了解详情</button>
								</div>
							</div>
						</div>

						<div class="bg-light-1 rounded-xl overflow-hidden flex flex-col md:flex-row">
							<div class="md:w-1/3 bg-secondary/10 flex items-center justify-center p-4">
								<i class="fa fa-mobile text-4xl text-secondary"></i>
							</div>
							<div class="md:w-2/3 p-5">
								<h3 class="font-medium text-dark mb-2">5G融合套餐</h3>
								<p class="text-sm text-dark-2 mb-3">1000分钟通话+100GB流量+300Mbps宽带，一张SIM卡满足所有需求。</p>
								<div class="flex items-center justify-between">
									<div>
										<span class="text-secondary font-bold text-xl">¥169</span>
										<span class="text-dark-2 text-sm">/月</span>
									</div>
									<button
										class="px-4 py-2 rounded-full bg-secondary text-white text-sm btn-hover">了解详情</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
		</main>

		<!-- 页脚 -->
		<footer class="bg-dark text-white py-4">
			<div class="container mx-auto px-4">
				<div class="text-center text-white/50 text-sm">
					<p>© 2025 网络测速工具 版权所有</p>
				</div>
			</div>
		</footer>

		<!-- 设置模态框 -->
		<div id="settings-modal" class="fixed inset-0 bg-dark/50 z-50 flex items-center justify-center hidden">
			<div class="bg-white rounded-2xl max-w-md w-full mx-4 p-6 transform transition-all duration-300 scale-95 opacity-0"
				id="modal-content">
				<div class="flex justify-between items-center mb-4">
					<h3 class="text-xl font-bold text-dark">测试设置</h3>
					<button id="close-settings" class="text-dark-2 hover:text-dark">
						<i class="fa fa-times"></i>
					</button>
				</div>
				<div class="space-y-4">
					<div>
						<label class="block text-dark-2 mb-2">服务器位置</label>
						<select id="server-location"
							class="w-full p-3 rounded-lg border border-light-2 focus:outline-none focus:ring-2 focus:ring-primary/50">
							<option>自动选择最佳服务器</option>
							<option>北京</option>
							<option>上海</option>
							<option>广州</option>
							<option>深圳</option>
							<option>成都</option>
						</select>
					</div>
					<div>
						<label class="block text-dark-2 mb-2">测试次数</label>
						<select id="test-count"
							class="w-full p-3 rounded-lg border border-light-2 focus:outline-none focus:ring-2 focus:ring-primary/50">
							<option>1次（快速）</option>
							<option selected>3次（标准）</option>
							<option>5次（精确）</option>
						</select>
					</div>
					<div>
						<label class="block text-dark-2 mb-2">高级设置</label>
						<div class="space-y-2">
							<div class="flex items-center justify-between">
								<span class="text-sm">下载测试大小</span>
								<span class="text-sm text-primary font-medium" id="download-size-text">10MB</span>
							</div>
							<div class="w-full bg-light-3 rounded-full h-1.5">
								<input type="range" id="download-size" min="1" max="20" value="10"
									class="w-full accent-primary">
							</div>
						</div>
					</div>
				</div>
				<div class="mt-6">
					<button id="save-settings"
						class="w-full py-3 rounded-lg bg-primary text-white font-medium btn-hover">保存设置</button>
				</div>
			</div>
		</div>

		<script>
			// 初始化DOM元素
			const startTestBtn = document.getElementById('start-test');
			const testStatus = document.getElementById('test-status');
			const downloadSpeedEl = document.getElementById('download-speed');
			const uploadSpeedEl = document.getElementById('upload-speed');
			const pingEl = document.getElementById('ping');
			const qualityAnalysis = document.getElementById('quality-analysis');
			const analysisPlaceholder = document.getElementById('analysis-placeholder');
			const currentNetworkEl = document.getElementById('current-network');
			const broadbandEstimation = document.getElementById('broadband-estimation');
			const estimationPlaceholder = document.getElementById('estimation-placeholder');
			const bandwidthEstimationText = document.getElementById('bandwidth-estimation-text');
			const comparisonText = document.getElementById('comparison-text');
			
			const usageSuggestions = document.getElementById('usage-suggestions');


			// 设置模态框
			const settingsBtn = document.getElementById('settings-btn');
			const settingsModal = document.getElementById('settings-modal');
			const modalContent = document.getElementById('modal-content');
			const closeSettings = document.getElementById('close-settings');
			const saveSettingsBtn = document.getElementById('save-settings');

			// 下载大小滑块
			const downloadSizeSlider = document.getElementById('download-size');
			const downloadSizeText = document.getElementById('download-size-text');

			// 页面加载完成后初始化
			document.addEventListener('DOMContentLoaded', function() {
				// 检测当前网络连接
				detectNetwork();

				// 加载保存的设置
				loadSettings();

				// 绑定事件监听
				startTestBtn.addEventListener('click', startSpeedTest);
				settingsBtn.addEventListener('click', openSettingsModal);
				closeSettings.addEventListener('click', closeSettingsModal);

				// 保存设置按钮点击事件
				saveSettingsBtn.addEventListener('click', saveSettings);

				// 下载大小滑块事件
				downloadSizeSlider.addEventListener('input', function() {
					downloadSizeText.textContent = `${this.value}MB`;
				});
			});

			// 检测当前网络连接
			function detectNetwork() {
				if (navigator.connection) {
					const connection = navigator.connection;
					let networkType = '未知网络';

					switch (connection.type) {
						case 'wifi':
							networkType = 'WiFi';
							break;
						case 'cellular':
							switch (connection.effectiveType) {
								case 'slow-2g':
									networkType = '2G (慢)';
									break;
								case '2g':
									networkType = '2G';
									break;
								case '3g':
									networkType = '3G';
									break;
								case '4g':
									networkType = '4G';
									break;
								case '5g':
									networkType = '5G';
									break;
								default:
									networkType = '移动网络';
							}
							break;
						case 'ethernet':
							networkType = '有线网络';
							break;
						case 'bluetooth':
							networkType = '蓝牙';
							break;
						case 'unknown':
							networkType = '未知网络';
							break;
						default:
							networkType = '网络连接';
					}

					currentNetworkEl.textContent = networkType;
				} else {
					currentNetworkEl.textContent = '无法检测网络类型';
				}
			}

			// 开始测速
			function startSpeedTest() {
				// 显示测试状态
				startTestBtn.disabled = true;
				startTestBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i>测试中...';
				testStatus.classList.remove('hidden');

				// 重置结果
				downloadSpeedEl.textContent = '0';
				uploadSpeedEl.textContent = '0';
				pingEl.textContent = '0';

				// 隐藏分析结果，显示占位符
				qualityAnalysis.classList.add('hidden');
				analysisPlaceholder.classList.remove('hidden');

				// 模拟测速过程
				let testDuration = 15; // 15秒测试时间
				let interval = 1; // 每秒更新一次
				let elapsed = 0;

				// 随机生成ping值 (10-50ms)
				const pingValue = Math.floor(Math.random() * 40) + 10;

				// 随机生成最终下载速度 (50-150Mbps)
				const finalDownloadSpeed = Math.random() * 100 + 50;

				// 随机生成最终上传速度 (20-60Mbps)
				const finalUploadSpeed = Math.random() * 40 + 20;

				// 模拟ping测试
				setTimeout(() => {
					pingEl.textContent = pingValue;
				}, 1000);

				// 模拟下载速度测试
				const downloadInterval = setInterval(() => {
					elapsed += interval;
					const progress = elapsed / testDuration;

					// 生成下载速度数据点
					const downloadSpeed = finalDownloadSpeed * progress;
					downloadSpeedEl.textContent = downloadSpeed.toFixed(1);

					if (elapsed >= testDuration) {
						clearInterval(downloadInterval);

						// 模拟上传速度测试
						const uploadTestDuration = 8; // 8秒上传测试
						const uploadInterval = setInterval(() => {
							const uploadProgress = elapsed / uploadTestDuration;
							const uploadSpeed = finalUploadSpeed * Math.min(uploadProgress, 1);
							uploadSpeedEl.textContent = uploadSpeed.toFixed(1);

							elapsed += interval;

							if (elapsed >= testDuration + uploadTestDuration) {
								clearInterval(uploadInterval);

								// 测试完成
								setTimeout(() => {
									startTestBtn.disabled = false;
									startTestBtn.innerHTML = '<i class="fa fa-refresh mr-2"></i>重新测试';
									testStatus.classList.add('hidden');
									// 显示宽带评估
									estimateBroadband(finalDownloadSpeed, finalUploadSpeed, pingValue);
									// 显示分析结果
									showAnalysis(finalDownloadSpeed, finalUploadSpeed, pingValue);
								}, 500);
							}
						}, interval * 1000);
					}
				}, interval * 1000);
			}

			// 根据测速结果估算宽带等级和全国用户比例
			function estimateBroadband(downloadSpeed, uploadSpeed, ping) {
				broadbandEstimation.classList.remove('hidden');
				estimationPlaceholder.classList.add('hidden');

				// 根据下载速度确定宽带区间和超越用户比例
				let bandwidthRange, SurpassPercentage, SurpassColor, advise;

				if (downloadSpeed < 5) {
					bandwidthRange = "2M以下";
					SurpassPercentage = 95;
					SurpassColor = "text-danger";
					advise = [
						"您的网络速度较慢，可能影响基本的网页浏览和视频播放。",
						"建议检查设备与路由器的连接，尝试重启路由器。",
						"考虑升级您的网络套餐以获得更快的速度。"
					];
				} else if (downloadSpeed < 10) {
					bandwidthRange = "2M～10M";
					SurpassPercentage = 85;
					SurpassColor = "text-danger";
					advise = [
						"您的网络速度可以满足基本的网页浏览，但可能无法流畅观看视频。",
						"建议关闭其他占用带宽的设备，以提高网络速度。",
						"考虑升级到更高带宽的套餐，以获得更好的网络体验。"
					];
				} else if (downloadSpeed < 20) {
					bandwidthRange = "10M～20M";
					SurpassPercentage = 70;
					SurpassColor = "text-warning";
					advise = [
						"您的网络速度可以流畅观看标清视频，但可能无法支持高清内容。",
						"适合日常浏览和简单的在线活动。",
						"如果需要观看高清视频或进行视频会议，建议升级带宽。"
					];
				} else if (downloadSpeed < 50) {
					bandwidthRange = "20M～50M";
					SurpassPercentage = 50;
					SurpassColor = "text-warning";
					advise = [
						"您的网络速度可以满足大多数在线活动，包括高清视频播放。",
						"适合中小家庭日常使用。",
						"如果有多台设备同时使用，建议升级到更高带宽。"
					];
				} else if (downloadSpeed < 100) {
					bandwidthRange = "50M～100M";
					SurpassPercentage = 30;
					SurpassColor = "text-success";
					advise = [
						"您的网络速度良好，可以支持多设备同时使用和高清视频播放。",
						"适合中等规模家庭日常使用。",
						"如果需要进行在线游戏或4K视频播放，建议升级到更高带宽。"
					];
				} else if (downloadSpeed < 300) {
					bandwidthRange = "100M～300M";
					SurpassPercentage = 15;
					SurpassColor = "text-success";
					advise = [
						"您的网络速度优秀，可以流畅支持4K视频播放和多设备同时使用。",
						"适合大型家庭和重度网络用户。",
						"如果需要企业级应用或超高清视频会议，建议升级到更高带宽。"
					];
				} else if (downloadSpeed < 1000) {
					bandwidthRange = "300M～1000M";
					SurpassPercentage = 5;
					SurpassColor = "text-success";
					advise = [
						"您的网络速度非常快，可以满足几乎所有在线需求，包括多设备4K视频和大型文件下载。",
						"适合对网络速度要求极高的用户。",
						"如果是普通家庭使用，当前带宽已经足够。"
					];
				} else {
					bandwidthRange = "1000M以上";
					SurpassPercentage = 1;
					SurpassColor = "text-success";
					advise = [
						"您的网络速度极快，属于顶级水平，可以支持企业级应用和超高清视频会议。",
						"适合对网络速度有极高要求的专业用户。",
						"您的网络配置非常优秀，无需升级。"
					];
				}

				// 更新DOM
				bandwidthEstimationText.innerHTML = `您的网速相当于 <span class="font-bold text-primary">${bandwidthRange}</span> 宽带`;
				comparisonText.innerHTML = `被全国 <span class="font-bold ${SurpassColor}">${SurpassPercentage}%</span> 的网络用户超越`;

				// 生成使用建议
				usageSuggestions.innerHTML = '';
				advise.forEach(s => {
					const li = document.createElement('li');
					li.className = 'flex items-start';
					li.innerHTML = `
			                    <i class="fa fa-lightbulb-o text-primary mt-1 mr-3"></i>
			                    <span class="text-dark-2">${s}</span>
			                `;
					usageSuggestions.appendChild(li);
				});
			}

			// 显示分析结果
			function showAnalysis(downloadSpeed, uploadSpeed, ping) {
				qualityAnalysis.classList.remove('hidden');
				analysisPlaceholder.classList.add('hidden');

				// 根据速度设置评级
				let rating, progress, description, suggestions, color;

				if (downloadSpeed > 100 && ping < 30) {
					rating = '优秀';
					progress = 90;
					description = '您的网络连接质量极佳，可以流畅观看高清视频、参与视频会议和在线游戏。';
					suggestions = ['您的网络表现出色，无需调整。'];
					color = 'text-success';
				} else if (downloadSpeed > 50 && ping < 50) {
					rating = '良好';
					progress = 75;
					description = '您的网络连接质量良好，可以满足大多数在线活动需求。';
					suggestions = ['建议定期清理设备缓存以保持最佳性能。', '关闭未使用的设备以减少网络拥堵。'];
					color = 'text-success';
				} else if (downloadSpeed > 20 && ping < 80) {
					rating = '一般';
					progress = 50;
					description = '您的网络连接质量一般，可以进行基本的网页浏览和视频播放，但可能会遇到缓冲。';
					suggestions = ['尝试重启路由器以提高网络速度。', '避免同时进行多个占用带宽的活动。'];
					color = 'text-warning';
				} else {
					rating = '较差';
					progress = 30;
					description = '您的网络连接质量较差，可能会影响基本的在线活动体验。';
					suggestions = ['检查设备与路由器的距离和信号强度。', '联系您的网络服务提供商检查线路问题。', '考虑升级您的网络套餐以获得更快的速度。'];
					color = 'text-danger';
				}

				// 更新DOM
				document.getElementById('quality-rating').textContent = rating;
				document.getElementById('quality-rating').className = `text-4xl font-bold ${color}`;
				document.getElementById('quality-progress').style.width = `${progress}%`;
				document.getElementById('quality-progress').className = `h-2.5 rounded-full ${color.replace('text-', 'bg-')}`;
				document.getElementById('quality-description').textContent = description;

				// 更新建议列表
				const suggestionsList = document.getElementById('quality-suggestions');
				suggestionsList.innerHTML = '';
				suggestions.forEach(suggestion => {
					const li = document.createElement('li');
					li.innerHTML = `<i class="fa fa-check-circle ${color} mr-2"></i>${suggestion}`;
					suggestionsList.appendChild(li);
				});
			}

			// 打开设置模态框
			function openSettingsModal() {
				settingsModal.classList.remove('hidden');
				setTimeout(() => {
					modalContent.classList.remove('scale-95', 'opacity-0');
					modalContent.classList.add('scale-100', 'opacity-100');
				}, 10);
			}

			// 关闭设置模态框
			function closeSettingsModal() {
				modalContent.classList.remove('scale-100', 'opacity-100');
				modalContent.classList.add('scale-95', 'opacity-0');
				setTimeout(() => {
					settingsModal.classList.add('hidden');
				}, 300);
			}

			// 保存设置
			function saveSettings() {
				// 获取设置值
				const settings = {
					serverLocation: document.getElementById('server-location').value,
					testCount: document.getElementById('test-count').value,
					downloadSize: document.getElementById('download-size').value
				};

				// 保存到localStorage
				localStorage.setItem('speedTestSettings', JSON.stringify(settings));

				// 显示保存成功的提示
				const saveBtn = document.getElementById('save-settings');
				const originalText = saveBtn.innerHTML;
				saveBtn.innerHTML = '<i class="fa fa-check mr-2"></i>保存成功';
				saveBtn.classList.remove('bg-primary');
				saveBtn.classList.add('bg-success');

				// 3秒后恢复按钮原状
				setTimeout(() => {
					saveBtn.innerHTML = originalText;
					saveBtn.classList.remove('bg-success');
					saveBtn.classList.add('bg-primary');

					// 关闭模态框
					closeSettingsModal();
				}, 1500);
			}

			// 加载保存的设置
			function loadSettings() {
				const settings = JSON.parse(localStorage.getItem('speedTestSettings'));

				if (settings) {
					document.getElementById('server-location').value = settings.serverLocation || '自动选择最佳服务器';
					document.getElementById('test-count').value = settings.testCount || '3次（标准）';
					document.getElementById('download-size').value = settings.downloadSize || 10;
					document.getElementById('download-size-text').textContent = `${settings.downloadSize || 10}MB`;
				}
			}

			// 点击模态框外部关闭模态框
			settingsModal.addEventListener('click', function(e) {
				if (e.target === settingsModal) {
					closeSettingsModal();
				}
			});
		</script>
	</body>
</html>